<mat-toolbar color="primary">
  <div class="w-full flex flex-row justify-start md:gap-x-6 md:px-16">
    <!-- Queue -->
    <a
      [routerLink]="['']"
      [routerLinkActiveOptions]="{ exact: true }"
      mat-button
      routerLinkActive="mat-accent"
      title="Go to the queue"
    >
      <mat-icon>format_list_bulleted</mat-icon>
      <span class="hidden md:inline"> Queue </span>
    </a>

    <!-- Browse -->
    <button
      mat-button
      [routerLink]="['/browse']"
      routerLinkActive="mat-accent"
      title="Browse the database"
    >
      <mat-icon>folder_open</mat-icon>
      <span class="hidden md:inline"> Browse </span>
    </button>

    <!-- Search -->
    <button
      mat-button
      [routerLink]="['/search']"
      routerLinkActive="mat-accent"
      title="Search the database"
    >
      <mat-icon>search</mat-icon>
      <span class="hidden md:inline"> Search </span>
    </button>

    <!-- Settings -->
    <a
      mat-button
      [routerLink]="['/settings']"
      routerLinkActive="mat-accent"
      title="Configure ampd"
    >
      <mat-icon>settings</mat-icon>
      <span class="hidden md:inline"> Settings </span>
    </a>

    <div class="flex-grow"></div>

    <span
      [routerLink]="['/']"
      class="hidden md:inline md:px-2 font-mono self-center"
      title="You are using ampd — nice!"
      >ampd</span
    >

    <div mat-button [ngSwitch]="connState | async" class="self-center mr-4">
      <mat-spinner
        color="accent"
        diameter="30"
        *ngSwitchCase="0"
        title="Connecting..."
      ></mat-spinner>
      <mat-icon *ngSwitchCase="1" title="Connected">cloud</mat-icon>
      <mat-spinner
        color="accent"
        diameter="30"
        *ngSwitchCase="2"
        title="Closing..."
      ></mat-spinner>
      <mat-icon *ngSwitchDefault title="Disconnected">cloud_off</mat-icon>
    </div>
    <span *ngIf="(connState | async) !== 1" class="not-connected">
      Not connected to ampd server
    </span>

    <div class="hidden md:inline self-center clickable">
      <mat-icon #helpIcon (click)="openHelpDialog()" title="Show shortcut help"
        >help</mat-icon
      >
    </div>
  </div>
</mat-toolbar>
<div class="px-1 md:pt-4 md:pm-32 md:px-24">
  <router-outlet></router-outlet>
</div>
